<template>
  <view class="container">
    <view class="form-container">
      <u-form :model="form" ref="uForm" :rules="rules">
        <u-form-item prop="username">
          <u-input placeholder="Username" v-model="form.username"/>
        </u-form-item>
        <u-form-item prop="password">
          <u-input placeholder="Password" type="password" v-model="form.password"/>
        </u-form-item>
      </u-form>
    </view>
    <view class="login-button-box" @click="onLogin">Log in</view>
  </view>
</template>

<script>
import router from '../../utils/router.js'
import { setToken } from '../../utils/index.js'
  export default {
    data() {
      return {
        setToken,
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message:'请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message:'请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onLogin(){
        this.$refs.uForm.validate().then(res => {
          setToken(this.form.username + ':' + this.form.password)
          uni.showToast({
            title: '登录成功',
          })
          router.redirectTo({ url: '/pages/Home/index' })
          console.log('验证通过');
        }).catch(error => {
          console.log('验证失败')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.container{
  box-sizing: border-box;
  padding: 0 24rpx;
}
.login-button-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 56rpx;
  margin-top: 24rpx;
  background: #4595ed;
  border-radius: 12rpx;
  color: #fff;
  font-weight: bold;
}
</style>